<template>
	<view class="container">
		<navSearchBar title="全部分享"></navSearchBar>
		<view class="tab flex-col-between">
			<text v-for="(item,index) in tab" :style="{color:current== index?'#3B54DA':'#5B5D65'}"
				@click="tabChage(index)">{{item.name}}</text>
		</view>
		<scroll-view class="scroll" scroll-y @scrolltolower="loadMore">
		<view class="list">
			<view class="list-item flex-row-center" v-for="item in list" :key="item.id" @click="toDetail(item)">
				<image :src="item.relevance.picture" mode=""></image>
				<view class="item-content">
					<view class="title ellipsis">{{item.relevance.title}}</view>
					<view class="desc ellipsis">
						<text>{{item.relevance.update_time}}</text>
						<text>分享了此产品</text>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: [
					{name:"产品",fun:"productAllShare",url:"productDetail"},
					{name:"案例",fun:"caseAllShare",url:"sampleDetail"},
					{name:"基地",fun:"baseAllShare",url:"baseResourceDetail"},
					{name:"讲师",fun:"lecturerAllShare",url:"teacherResourceDetail"},
					{name:"供应商",fun:"supplierAllShare",url:"supplierResourceDeatil"},
				],
				current:0,
				list:[],
				page:1,
				pageSize:10
			};
		},
		onLoad() {
			this.getAllShare()
		},
		methods:{
			async getAllShare() {
				uni.showLoading({
					title: '加载中'
				})
				let res = await this.$api[this.tab[this.current].fun]({limit:this.page * this.pageSize})
				if(res.data.status) {
					uni.hideLoading();
					this.list = res.data.data.data
				}
			},
			loadMore() {
				if(this.list.length <= this.page * this.pageSize) return
				this.page++
				this.getAllShare()
			},
			tabChage(num) {
				this.current = num
				this.page = 1
				this.getAllShare()
			},
			toDetail(info) {
				this.$Router.push({name:this.tab[this.current].url,query:{id:info.relevance.id}})
			} 
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}

	.tab {
		height: 98rpx;
		padding: 40rpx 30rpx 30rpx;
		border-bottom: 2rpx solid #EFEFEF;
	
		text {
			font-size: 28rpx;
			font-weight: Regular;
		}
	}
	.scroll {
		flex: 1;
		height: 100%;
	}
	.list {
		flex-grow: 1;
		overflow: scroll;
		padding: 10rpx 30rpx;
	
		.list-item {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #EFEFEF;
			box-sizing: border-box;
		}
		image {
			width: 140rpx;
			height: 100rpx;
			margin-right: 30rpx;
			border-radius: 30rpx;
		}
		.item-content {
			width: 70%;
			.title {
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: $Semibold;
				color: #525252;
				margin-bottom: 20rpx;
			}
			.desc {
				font-size: $text-size;
				line-height: $text-size;
				color: #6F6F6F;
				text:nth-child(1) {
					margin-right: 10rpx;
				}
			}
		}
	
	}
</style>